<template>
  <div id="indexone" :style="{ width, height }"></div>
</template>

<script>
import { queryCurrentList } from '@/api/collection/board'
import resize from '@/views/dashboard/mixins/resize'

export default {
  name: 'indexone',
  mixins: [resize],
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    }

  },
  data() {
    return {
      chart: null,
      //测点名称
      pointName: '',
      //全局名称
      globalName: '',
      //采集项的id
      dataItem1: '',
      //单位
      dimension: '',
      time: '',
      value: '',
      xdata: [],
      ydata: [],

      time2: '',
      value2: '',
      xdata2: [],
      ydata2: [],

      time3: '',
      value3: '',
      xdata3: [],
      ydata3: [],
      timer: null,
      // 采集项列表
      dataItemOptions: [],
      titles: '',
      titles2: '',
      titles3: ''

    }
  },
  watch: {},
  mounted() {
    this.getData()
    //设置定时器
    this.timer = setInterval(() => {
      this.getData()
    }, 5000)
  },
  destroyed() {
    clearInterval(this.timer)
    this.timer = null
  },
  methods: {
    //获取值
    loadDetailChart() {
      const echarts = this.$echarts
      if (!this.chart) {
        this.chart = echarts.init(document.getElementById('indexone'))
      }

      //此图用来展示有3个维度的图形报表
      var colors = ['#6b96e5', 'red', 'yellow', '#fd8958']
      let xdata = this.xdata
      let ydata = this.ydata
      let xdata2 = this.xdata2
      let ydata2 = this.ydata2
      let xdata3 = this.xdata3
      let ydata3 = this.ydata3
      let option = {
        color: colors,
        tooltip: {
          trigger: 'axis',
          textStyle: {
            // fontSize: this.formatPx(14),
          }
        },
        legend: {
          top: '3%',
          right: '5%',
          data: [this.titles, this.titles2, this.titles3],
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          top: '22%',
          left: '4%',
          right: '8%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          axisTick: {
            alignWithLabel: false
          },
          axisLabel: {
            textStyle: { color: '#fff' },
            formatter(params) {
              var s = params.split(' ')
              return s[1] + '\n' + s[0]
            }
          },
          data: xdata,
          axisLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(255, 255, 255,0.5)'
            }
          }
        },
        yAxis: {
          type: 'value',
          name: '',
          position: 'left',
          axisLine: {
            show: false
          },
          axisTick: { show: false },
          axisLabel: {
            textStyle: { color: '#fff' }
          },

          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(255, 255, 255,0.5)'
            }
          }
        },

        series: [
          // {
          //   name: this.titles,
          //   type: 'line',
          //   barWidth: `${ydata.length * 4}%`, //barWidth设置每根柱状图的宽度
          //   data: ydata,
          // },
          {
            name: this.titles,
            color: colors[1],
            type: 'line',
            data: ydata,
            symbolSize: 10,
            label: {
              show: false
            }
          },
          // {
          //   name: this.titles2,
          //   type: 'line',
          //   barWidth: `${ydata2.length * 4}%`, //barWidth设置每根柱状图的宽度
          //   data: ydata2,
          // },
          {
            name: this.titles2,
            color: colors[2],
            type: 'line',
            data: ydata2,
            symbolSize: 10,
            label: {
              show: false
            }
          },
          // {
          //   name: this.titles3,
          //   type: 'line',
          //   barWidth: `${ydata3.length * 4}%`, //barWidth设置每根柱状图的宽度
          //   data: ydata3,
          // },
          {
            name: this.titles3,
            color: colors[3],
            type: 'line',
            data: ydata3,

            symbolSize: 10,
            label: {
              show: false
            }
          }
        ]
      }

      this.chart.setOption(option)
      this.chart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: 5
      })
    },
    //获取数据
    getData() {

      queryCurrentList().then((response) => {

        this.titles = response[0].desc
        this.titles2 = response[1].desc
        this.titles3 = response[2].desc
        this.titles4 = response[3].desc

        // 赋值xdata和ydata，长度超过10时先进后出
        this.time = response[0].time
        this.value = response[0].value.toFixed(2)

        let time = response[0].time
        let value = response[0].value.toFixed(2)
        this.xdata.length >= 5 && this.xdata.shift()
        this.ydata.length >= 5 && this.ydata.shift()
        let newData = this.makeDifferentData(
          time,
          value,
          this.xdata,
          this.ydata[this.ydata.length - 1]
        )
        this.xdata.push(newData.time)
        this.ydata.push(newData.val)

        // 第二条
        this.time2 = response[1].time
        this.value2 = response[1].value.toFixed(2)
        let time2 = response[1].time
        let value2 = response[1].value.toFixed(2)
        this.xdata2.length >= 5 && this.xdata2.shift()
        this.ydata2.length >= 5 && this.ydata2.shift()
        let newData2 = this.makeDifferentData(
          time2,
          value2,
          this.xdata2,
          this.ydata2[this.ydata2.length - 1]
        )
        this.xdata2.push(newData2.time)
        this.ydata2.push(newData2.val)

        // 第三天
        this.time3 = response[2].time
        this.value3 = response[2].value.toFixed(2)
        let time3 = response[2].time
        let value3 = response[2].value.toFixed(2)
        this.xdata3.length >= 5 && this.xdata3.shift()
        this.ydata3.length >= 5 && this.ydata3.shift()
        let newData3 = this.makeDifferentData(
          time3,
          value3,
          this.xdata3,
          this.ydata3[this.ydata3.length - 1]
        )
        this.xdata3.push(newData3.time)
        this.ydata3.push(newData3.val)

        this.loadDetailChart()
      })

    }
  }
}
</script>
<style lang="" scoped></style>
